<template>
  <view class="min-h-100vh bg-[#F1F1F1]">
    <!-- 191行 -->
    <wd-navbar 
      :title="detailList[0]?.title || '学习详情'" 
      custom-class="navbar-custom" 
      :bordered="false" 
      safeAreaInsetTop
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    ></wd-navbar>

    <view class="px-[24rpx] pt-[40rpx]">
      <!-- 视频播放 -->
      <view class="mb-4">
        <view class="flex justify-between items-center mb-[24rpx]">
          <text class="color-[#282828] text-[32rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">
            {{ detailList[0]?.title }}
          </text>
          <text class="text-[#282828] text-[32rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">
            <text v-if="videoProgress < 100">观看进度：{{ videoProgress }}%</text>
            <text v-else>100%</text>
          </text>
        </view>
        <!-- 视频播放器 -->
        <view class="bg-[rgba(0,0,0,0)] box-border relative">
          <video
            id="studyVideo"
            :src="videoUrl"
            :initial-time="initial_time"
            :style="{ width: '100%', height: videoHeight }"
            object-fit="fill"
            :controls="true"
            :show-center-play-btn="true"
            :show-background-playback-button="false"
            :show-play-btn="true"
            :enable-progress-gesture="false"
            :show-progress="true"
            :show-loading="true"
            @timeupdate="onVideoTimeUpdate"
            @play="onVideoPlay"
            @pause="onVideoPause"
            @ended="onVideoEnded"
            @loadedmetadata="onVideoLoadedMetadata"
            class="rounded-[16rpx] overflow-hidden"
          >
          </video>
        </view>
      </view>

      <!-- PDF -->
      <view>
        <view class="flex justify-between items-center mb-3">
          <text class="text-[#282828] text-[32rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">
            {{ detailList[1]?.title }}
          </text>
          <text class="text-[#282828] text-[32rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">
            <text v-if="detailList[1]?.progress >= detailList[1]?.duration">已完成</text>
            <text v-else-if="detailList[1]?.progress == 0">未开始</text>
            <text v-else>已阅读{{ formatSeconds(detailList[1]?.progress) }}</text>
          </text>
        </view>
        <view 
          class="bg-white rounded-[16rpx] flex justify-center items-center h-[320rpx] box-border"
          style="flex-direction: column;"
        >
          <image 
            src="/src/static/images/pdf.png" 
            class="w-[144rpx] h-[144rpx]"
            @click="handleViewPDF"
          ></image>
          <span class="text-[#000] text-[30rpx] mt-[10rpx]">{{ detailList[1]?.title }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
    themeDetail, // 获取主题详情
    reportStudy // 上报学习
} from '@/api/study.js'
import { useUserStore } from '@/store/user'
import { getEnvBaseUrl } from '@/utils'
import { formatSeconds } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'Study',
})

const theme_id = ref('')
const baseUrl = getEnvBaseUrl()
const detailList = ref([])

// 视频相关
const videoUrl = ref('')
const currentTime = ref(0) // 当前播放时间
const duration = ref(0) // 视频总时长
const videoHeight = ref('400rpx') // 视频高度，初始值400rpx，播放后根据实际宽高比自动调整

// 禁止拖拽相关变量
const video_real_time = ref(0) // 实际播放进度
const initial_time = ref(0) // 该用户看到的位置
const videoTime = ref(0) // 视频时间长度
const videoContext = ref('') // 用来存储video对象
const watchTime = ref(0) // 实际观看时间
const isInitialSeeking = ref(false) // 标记是否正在进行初始化seek，用于禁止拖拽逻辑中排除初始化seek

// 学习进度上报相关变量
const file_id = ref('') // 学习文件ID
const accumulatedPlayTime = ref(0) // 累计播放时间（秒）
const pendingDuration = ref(0) // 待上报的时长（用于处理上报失败的累加）
const playingTimer = ref(null) // 播放计时定时器
const reportTimer = ref(null) // 上报定时器
const isPlaying = ref(false) // 是否正在播放

// ⭐ 新增：用于处理 progress 溢出和进度计算
const apiProgress = ref(0) // 从API保存的原始progress值
const videoRealLength = ref(0) // 真实视频时长（从视频元数据获取）

// 计算观看进度（显示总学习进度：历史进度 + 本次累计时间）
const videoProgress = computed(() => {
  if (duration.value === 0) return 0
  // 总学习时间 = 历史进度 + 本次累计时间
  const totalWatchedTime = apiProgress.value + accumulatedPlayTime.value
  return Math.floor((totalWatchedTime / duration.value) * 100)
})

// 创建视频上下文对象
onLoad((options) => {
  videoContext.value = uni.createVideoContext('studyVideo')
  theme_id.value = options.id
})

// 初始化视频观看时间 & 恢复播放
onShow(() => {
  // 重新获取详情数据，以获取最新的播放进度
  if (theme_id.value) {
    getDetail()
  }
})

// 页面卸载时的清理
onUnload(() => {
  // 清理所有定时器
  stopPlayingTimer()
  stopReportTimer()
})

// 上报学习进度
const reportStudyProgress = async () => {
  // 待上报的时长 = 未上报的累计时间 + 待上报的失败时长
  // 使用 Math.round() 而不是 Math.floor()，避免丢失小数部分
  const durationToReport = Math.round(accumulatedPlayTime.value) + pendingDuration.value
  
  if (durationToReport === 0 || !file_id.value) {
    return
  }
  
  const reportData = {
    file_id: file_id.value,
    duration: durationToReport
  }
  
  try {
    const result = await reportStudy(
      reportData,
      // 不显示错误提示和加载框，后台静默上报
      {
        hideErrorToast: true,
        showLoading: false
      }
    )
    // 这样可以保证总进度持续增长，不会在上报后回退
    apiProgress.value += Math.round(accumulatedPlayTime.value)
    
    // 清空累计时间和待上报时长
    accumulatedPlayTime.value = 0
    pendingDuration.value = 0
  } catch (err) {
    // 上报失败，将当前累计时间累加到待上报时长
    // 这里也改用 Math.round() 保持一致
    pendingDuration.value += Math.round(accumulatedPlayTime.value)
    accumulatedPlayTime.value = 0
  }
}

// 启动播放计时定时器
const startPlayingTimer = () => {
  // 清除之前的定时器
  if (playingTimer.value) {
    clearInterval(playingTimer.value)
  }
  
  // 每100ms累加一次播放时间（0.1秒）
  playingTimer.value = setInterval(() => {
    if (isPlaying.value) {
      accumulatedPlayTime.value += 0.1
    }
  }, 100)
}

// 停止播放计时定时器
const stopPlayingTimer = () => {
  if (playingTimer.value) {
    clearInterval(playingTimer.value)
    playingTimer.value = null
  }
}

// 启动上报定时器
const startReportTimer = () => {
  // 清除之前的定时器
  if (reportTimer.value) {
    clearInterval(reportTimer.value)
  }
  
  // 每5秒上报一次
  reportTimer.value = setInterval(() => {
    reportStudyProgress()
  }, 5000)
}

// 停止上报定时器
const stopReportTimer = () => {
  if (reportTimer.value) {
    clearInterval(reportTimer.value)
    reportTimer.value = null
  }
}

// 获取主题详情
const getDetail = () => {
  themeDetail({
    theme_id: theme_id.value
  }).then(res => {
    detailList.value = res||[]  //获取到的学习数据列表
    
    if (res && res.length > 0) {
      const firstItem = res[0]
      
      videoUrl.value = firstItem.path ? baseUrl + firstItem.path : ''
      videoHeight.value = firstItem.height ? firstItem.height + 'rpx' : '400rpx'
      duration.value = firstItem.duration ? firstItem.duration : 0
      
      // ⭐ 修改：保存API返回的原始progress值，不立即作为initial_time使用
      apiProgress.value = firstItem.progress ? firstItem.progress : 0
      // 初始时不设置initial_time，等待onVideoLoadedMetadata中处理
      initial_time.value = 0
      
      // 获取学习文件ID用于上报 - 尝试多个可能的字段名
      file_id.value = firstItem.id || firstItem.file_id || firstItem.themeId || theme_id.value || ''
      
      // ⭐ 关键：返回此页面时，清空本次累计观看秒数和待上报时长
      // 因为后端progress已更新，需要重新开始计算
      accumulatedPlayTime.value = 0
      pendingDuration.value = 0
    }
  }).catch(err => {
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  })
}

// 视频元数据加载完成 - 获取视频真实宽高并计算高度 & 执行初始化 seek
const onVideoLoadedMetadata = (e) => {
  const { width, height } = e.detail
  if (width && height) {
    // 获取屏幕宽度（减去左右padding: 24rpx * 2 = 48rpx）
    const systemInfo = uni.getSystemInfoSync()
    const screenWidth = systemInfo.screenWidth
    // 计算实际可用宽度（rpx转px：750rpx = screenWidth px）
    const containerWidth = screenWidth - (48 / 750 * screenWidth)
    // 根据视频宽高比计算高度
    const calculatedHeight = (containerWidth * height) / width
    videoHeight.value = `${calculatedHeight}px`
  }
  
  // ⭐ 新增：获取真实视频时长
  videoRealLength.value = e.detail.duration || 0
  
  // ⭐ 关键：处理 progress 溢出，计算实际播放起点
  if (apiProgress.value > 0 && videoRealLength.value > 0) {
    // 如果 progress 大于视频时长，使用取余来处理（允许多遍播放）
    initial_time.value = apiProgress.value % videoRealLength.value
  }
  
  // 视频元数据加载完成后，才执行初始化 seek 和播放
  if (initial_time.value > 0 && videoContext.value) {
    // 标记正在进行初始化 seek
    isInitialSeeking.value = true
    videoContext.value.seek(initial_time.value)
    // 延迟执行 play，确保 seek 已生效
    setTimeout(() => {
      videoContext.value.play()
      isInitialSeeking.value = false
      watchTime.value = initial_time.value
    }, 100)
  } else if (videoContext.value) {
    // 如果没有初始播放位置，直接播放
    videoContext.value.play()
  }
}

// 视频时间更新 - 实现禁止拖拽逻辑
const onVideoTimeUpdate = (e) => {
  currentTime.value = e.detail.currentTime
  if (duration.value === 0) {
    duration.value = e.detail.duration
  }
  
  // 如果正在进行初始化 seek，跳过禁止拖拽检查
  if (isInitialSeeking.value) {
    return
  }
  
  // 禁止拖拽逻辑 - 既不准快进也不准后退
  videoTime.value = parseInt(e.detail.duration)
  // 记录用户当前视频进度
  const jumpTime = parseInt(e.detail.currentTime)
  
  // 当前逻辑：既不准快进也不准后退
  const timeDiff = Math.abs(jumpTime - watchTime.value)
  if (timeDiff > 3) {
    // 差别过大（快进或后退），调用seek方法跳转到实际观看时间
    videoContext.value.seek(watchTime.value)
    videoContext.value.play()
    // ⭐ 还原后立即关闭蒙版
    isVideoLoading.value = false
  } else {
    video_real_time.value = parseInt(e.detail.currentTime)
    if (video_real_time.value > watchTime.value) {
      watchTime.value = video_real_time.value
    }
  }
}

// 视频播放
const onVideoPlay = () => {
  isPlaying.value = true
  // 首次播放时启动计时和上报定时器
  if (!playingTimer.value) {
    startPlayingTimer()
  }
  if (!reportTimer.value) {
    startReportTimer()
  }
}

// 视频暂停
const onVideoPause = () => {
  isPlaying.value = false
}

// 视频播放结束
const onVideoEnded = () => {
  currentTime.value = duration.value
  isPlaying.value = false
  // 视频播放结束时，进行最后的上报
  reportStudyProgress()
  // 清理定时器
  stopPlayingTimer()
  stopReportTimer()
}

// 返回上一页
const goBack = () => {
  // 清理定时器
  isPlaying.value = false
  stopPlayingTimer()
  stopReportTimer()
  uni.navigateBack()
}

// 查看PDF
const handleViewPDF = () => {
  // 停止播放和计时
  videoContext.value.pause()
  isPlaying.value = false
  stopPlayingTimer()
  stopReportTimer()
  
  // ⭐ 改进：离开前最后上报一次，确保数据不遗漏
  reportStudyProgress()
  
  // 跳转到文档阅读页面
  uni.navigateTo({
    url: `/pages-children/docView/index?url=${detailList.value[1]?.path}&file_id=${detailList.value[1]?.file_id}&progress=${detailList.value[1]?.progress}&duration=${detailList.value[1]?.duration}&type=time`
  })
}
</script>

<style>
page {
  background-color: #F1F1F1;
}
</style>

<style scoped>
</style>
